<template>
  <div class="list-page-b">
    <div class="list-page">
      <div class="list-search">

        <div class="singe-search">
          <el-select v-model="search.selectValue" clearable placeholder="请选择资产/耗材" :size="size">
            <el-option v-for="item in options" :key="item.value"
              :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="singe-search">
          <el-input placeholder="请输入物品名称/编码搜索" v-model="search.inputValue" clearable :size="size">
          </el-input>
        </div>

        <!-- 远程搜索 -->
        <div class="singe-search">
          <el-autocomplete
            :size="searchInputSize"
            :debounce="searchInputDebounce"
            :value-key="searchInputValueKey"
            :fetch-suggestions="querySearchInputAsync"
            @select="searchInputSelect"
            v-model="search.typeName"
            placeholder="请输入物品类型搜索"
            @focus="searchInputType='物品类型'">
          </el-autocomplete>
        </div>
        <!-- 远程搜索 -->
        <!-- 远程搜索 -->
        <div class="singe-search">
          <el-autocomplete
            :size="searchInputSize"
            :debounce="searchInputDebounce"
            :value-key="searchInputValueKey"
            :fetch-suggestions="querySearchInputAsync"
            @select="searchInputSelect"
            v-model="search.supplierName"
            placeholder="请输入供应商搜索"
            @focus="searchInputType='供应商'">
          </el-autocomplete>
        </div>
        <!-- 远程搜索 -->

        <div class="singe-search-btn">
          <el-button icon="el-icon-check" :size="size" @click="startSearch"></el-button>
          <el-button icon="el-icon-refresh-left" :size="size" @click="reSearch"></el-button>
        </div>

        <div class="singe-btn">
          <el-button type="primary" :size="size" icon="el-icon-back" @click="toBack">返回</el-button>
        </div>
      </div>
      <div class="table-main cell-table">
        <el-table :data="tableData" style="width: 100%" :height="tableHeight" :border="true" show-summary="true">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="资物品名称" width="300">
            <template slot-scope="scope">
              <div class="cell-name" slot="reference" @click="cellClick(scope.$index, scope.row)"
                v-if="tableIndex!==scope.$index">
                <span class="row-sapn">{{scope.row.name}}</span>
              </div>
              <el-popover
                v-if="tableIndex===scope.$index"
                placement="bottom" width="500" trigger="manual"
                v-model="visible"
              >
                <div class="popover-table" @click="popoverTableClick">
                  <el-table :data="gridData" @cell-click="popoverTableDblclick">
                    <el-table-column width="300" property="name" label="资物品名称"></el-table-column>
                    <el-table-column property="date" label="类型"></el-table-column>
                  </el-table>
                </div>
                <div class="cell-name" slot="reference" @dblclick="dblclick(scope.$index, scope.row)">
                  <el-input ref="input" v-model="scope.row.name" :size="size" @blur="cellBlur" @input="cellInput">{{scope.row.name}}</el-input>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="类型" width="200">
            <template slot-scope="scope">
              <span class="row-sapn">{{scope.row.date}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="资产/耗材">
            <template slot-scope="scope">
              <span class="row-sapn">{{scope.row.address}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="供应商">
            <template slot-scope="scope">
              <span class="row-sapn">{{scope.row.desc}}</span>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <el-dialog :title="'测试弹窗'" :visible.sync="dialogVisible" width="600px" class="form-dialog" append-to-body
                 :close-on-click-modal="false">
        <div class="modalBody">
          <el-form ref="dialogForm"  label-position="top">
            <el-form-item label="账号" prop="account">
              <el-input  :maxlength="15"  placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-table :data="gridData" @cell-click="popoverTableDblclick">
              <el-table-column width="300" property="name" label="资物品名称"></el-table-column>
              <el-table-column property="date" label="类型"></el-table-column>
            </el-table>

          </el-form>
        </div>
        <div style="clear: both"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog('dialogForm')" icon="el-icon-circle-plus-outline" size="small">
            确 定
          </el-button>
          <el-button @click="dialogVisible=false" icon="el-icon-circle-close" size="small">
            取 消
          </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {searchQueryInputMixin} from "@/mixins/searchQueryInput";
export default {
  mixins: [searchQueryInputMixin],
  data() {
    return {
      delete:false,//判断是否激活文本框
      size:"small",
      options: [
        {value: '选项1',label: '选项1'},
        {value: '选项2',label: '选项2'},
        {value: '选项3',label: '选项3'},
        {value: '选项4',label: '选项4'},
        {value: '选项5',label: '选项5'}
      ],
      tableData: [],
      pageSize:10,
      currentPage:1,
      search:{
        selectValue:"",
        inputValue:"",
        timeValue:[],
        // 远程搜索
        typeName:"",//物品类型
        supplierName:"",//供应商
        // 远程搜索
      },
      dialogVisible:false,
      infoVialogVisible:false,
      visible: false,
      tableIndex:null,
      inputValue:"",
      gridData:[],
    }
  },
  computed:{
    tableHeight(){
      let h=document.body.clientHeight-230;
      return h;
    },
  },
  watch:{},
  created(){
    this.keyDown();
    for (let i = 0; i < 1; i++) {
      this.tableData.push({
        id:i,
        date: '',
        name: '',
        address: '',
        desc: '',
      })
    }
    this.gridData=[]
    for (let i = 0; i < 5; i++) {
      this.gridData.push({
        id:i,
        date: '资物品名称 '+i,
        name: '类型 '+i,
      })
    }
  },
  mounted(){},
  methods:{
    cellClick(index, row){
      console.log(`点击第一次`,index, row);
      this.tableIndex = index;
      this.delete = true;
    },
    dblclick(index){
      console.log('双击')
      this.$refs.input.blur();
      this.tableIndex = index;
      this.dialogVisible = true;
    },
    cellInput(value){
      console.log(`当输入文本变化时候显示弹窗`,value);
      if (value){
        this.visible=true;
      }else{
        this.visible=false;
      }
    },
    // 监听键盘
    keyDown() {
      document.onkeydown =  (e) => {
        //事件对象兼容
        let e1 = e || event || window.event
        // console.log("键盘按键==",e1)
        var agent = navigator.userAgent.toLowerCase();
        var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
        if(agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0){
          if(e1 && e1.keyCode == 46 ){
            if (this.delete){
              alert("这是一个windows64位系统删除");
            }
          }
        }
        if(agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0){
          if(e1 && e1.keyCode == 46 ){
            if (this.delete){
              alert("这是一个windows64位系统删除");
            }
          }
        }
        if(isMac){
          if(e1 && e1.keyCode == 8 ){
            if (this.delete){
              this.deleteRowData();
            }
          }
        }
      }
    },
    cellBlur(){
      console.log('失去焦点')
      this.visible=false;
    },
    popoverTableClick(){
      console.log('弹窗隐藏')
      this.visible=false;
    },
    popoverTableDblclick(row, column){
      this.dialogVisible = false;
      console.log(`当前选择哪行`,this.tableIndex);
      console.log(`选中表格数据`,row, column);
      this.tableData[this.tableIndex].name=row.name
      this.tableData[this.tableIndex].date=row.date
      console.log('当前点击行数',this.tableIndex,'表格行数',this.tableData.length)
      if (this.tableIndex == this.tableData.length-1){
        this.tableData.push({
          id:this.tableData.length,
          date: '',
          name: '',
          address: '',
          desc: '',
        })
      }
      this.tableIndex=null;
      this.delete = false;
    },
    deleteRowData(){
      console.log('选中的行数',this.tableIndex,'table表格总行数',this.tableData.length);
      if (this.tableIndex == this.tableData.length-1){
        this.$message.warning('不能删除空数据')
        return;
      }
      this.tableData.splice(this.tableIndex,1);
    },
    toBack(){
      this.$router.push({path: `/demo/demo`});
    }
  },
}
</script>

<style lang="scss">
@import '../../styles/page/list.scss';
.cell-name{
  height: 23px;
}
.cell-table{
  .el-table td{
    padding: 0;
  }
  .el-table .cell{
    padding-left: 0;
    padding-right: 0;
    height: 32px;
    line-height: 32px;
    .row-sapn{
      margin-left: 6px;
    }
  }
}

.popover-table{
  width: 100%;
}
</style>
